<template>
  <!-- 我的资产 -->
  <div class="myProperty-view youke">
    <Navs left></Navs>
    <div class="main_top">
      <div class="main_total">
        <div class="total-content">
          <div class="total-left">
            <div class="total_amt">{{zhichan.cjf}}</div>
            <div class="total_tips">总资产(枚)</div>
          </div>
          <div class="total-right">
            <div
              class="dings"
              v-if="zhichan.ding==0"
              @click="dingfun"
            ><img
                src="@/assets/other/ding.png"
                width="80"
                height="29"
                alt=""
              ></div>
            <div
              class="dings"
              v-else-if="zhichan.ding==1"
            ><img
                src="@/assets/other/ding-a.png"
                width="80"
                height="29"
                alt=""
              ></div>
            <div class="dinglist">
              <router-link
                tag="span"
                to="/property/ding"
              >签到记录＞</router-link>
            </div>
          </div>
        </div>

        <div class="total_chart">
          <div
            class="chart_pic"
            ref="chartPic"
          ></div>
          <div class="chart_tips">
            <div style="margin-top:13px;">
              <i></i>
              可用&nbsp;&nbsp;{{zhichan.ajf}}
            </div>
            <div>
              <i></i>
              冻结&nbsp;&nbsp;{{this.zhichan.bjf}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <Main
      pt
      pb
    >
      <div class="main_list">
        <div class="list_header">资产明细</div>
        <div class="list_content">
          <van-pull-refresh
            v-model="isLoading"
            @refresh="onRefresh"
            class="refresh-main"
          >
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              v-if="nolist"
            >
              <div
                class="content_item"
                v-for="(item,index) in list"
                :key="index"
              >
                <div class="fl">
                  <div class="fl_type">{{item.remark}}</div>
                  <div class="fl_datetime">{{item.time}}</div>
                </div>
                <div class="fr">
                  <div class="fr_type"></div>
                  <div class="fr_amt minus">{{item.status==1?'+':'-'}}{{item.jfs}}</div>
                </div>
              </div>
            </van-list>
            <nolist v-else></nolist>
          </van-pull-refresh>
        </div>
      </div>
    </Main>
    <!-- <Tabbar></Tabbar> -->
    <div class="mengview" v-show="dingshow">
      <div class="qdao-bg">
        <img
          src="@/assets/other/qdao-c.png"
          alt=""
        >
        <div class="wintext">+1</div>
        <div class="ding-text">恭喜你,签到成功!</div>
        <div class="dings-btn">
          <div @click="dingshow=false">返回</div>
          <div> <router-link
                tag="span"
                to="/property/ding"
              >签到记录＞</router-link></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import echarts from "echarts/lib/echarts";
import "echarts/lib/chart/pie";
import "echarts/lib/component/legendScroll";
import "echarts/lib/component/tooltip";
import { news,user } from "@/api";
import nolist from "@/components/common/nolist";
export default {
  //接收父级传递的参数
  props: [],
  //监听数据变化
  watch: {},
  data() {
    return {
      totalAmt: "10000.00",
      list: [],
      myChart: null,
      loading: true,
      finished: false,
      isLoading: false,
      page: 1,
      nolist: true,
      dingshow:false
    };
  },
  //实例初始化之前触发事件
  beforeCreate() {},
  //实例化之后触发事件
  created() {
    this.assetsList();
  },
  //实时监控data参数数据变化
  computed: {
    zhichan() {
      return this.$store.getters.zhichans;
    }
  },
  //模板组件
  components: {
    nolist
  },
  //执行方法
  methods: {
    assetsList() {
      news.assets({ page: this.page }).then(res => {
        if (res.code == 1000) {
          if (Number(res.count) != 0) {
            this.list = [...this.list, ...res.result];
            this.loading = false;
            this.nolist = true;
            if (this.list.length == Number(res.count)) {
              this.finished = true;
            }
          } else {
            this.list = [];
            this.nolist = false;
            this.loading = false;
            this.finished = true;
          }
        }
      });
    },
    dingfun() {
       user.ding().then(res=>{
         if(res.code==1000){
           this.dingshow=true;
           this.$store.dispatch("addzhichan")
         }
       })
      
    },
    onLoad() {
      this.page += 1;
      this.assetsList();
    },
    onRefresh() {
      this.nolist = true;
      this.loading = true;
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        this.assetsList();
      }, 500);
      this.page = 1;
      this.list = [];
    },
    getEchart() {
      this.myChart = echarts.init(this.$refs.chartPic);
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "axis"
        },
        toolbox: {
          feature: {}
        },
        series: [
          {
            name: "pie",
            type: "pie",
            radius: ["70%", "85%"],
            center: ["30%", "44%"],
            startAngle: -90,
            avoidLabelOverlap: true,
            selectedOffset: 2,
            seriesLayoutBy: "row",
            silent: true,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "10",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: this.zhichan.ajf,
                name: "可用",
                selected: true,
                itemStyle: { color: "#3377ff" }
              },
              {
                value: this.zhichan.bjf,
                name: "冻结",
                itemStyle: { color: "#ff4b3b" }
              }
            ]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    }
  },
  mounted() {
    this.$store.dispatch("addzhichan").then(res => {
      this.getEchart();
    });
  }
  //路由退出时候调用
  //beforeRouteLeave(to, from, next){next()}
};
</script>

<style scoped lang="less">
.myProperty-view {
  box-sizing: border-box;
}

.main_top {
  padding-top: 2.875rem;
}

.main_total {
  width: 92%;
  height: 380/32rem;
  background-color: #fff;
  margin: 30/32rem;
  padding: 42/32rem;
  box-sizing: border-box;
  border: 1px solid #efefef;

  .total_amt {
    width: 258/32rem;
    height: 45/32rem;
    font-size: 45/32rem;
    color: #212121;
    text-align: left;
  }

  .total_tips {
    margin: 23/32rem 0;
    font-size: 25/32rem;
    color: #999;
  }

  .total_chart {
    border-top: 1px solid #efefef;
    padding-top: 26/32rem;
    height: 150/32rem;
    position: relative;
    padding-left: 350/32rem;
  }
}

.main_list {
  width: 100%;
  background-color: #fff;

  .list_header {
    box-sizing: border-box;
    height: 80/32rem;
    font-size: 26/32rem;
    line-height: 80/32rem;
    padding-left: 28/32rem;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
  }

  .content_item {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 120/32rem;
    padding: 18/32rem 28/32rem;
    border-bottom: 1px solid #efefef;
    justify-content: space-between;
    .fl {
      text-align: left;

      .fl_type {
        font-size: 30/32rem;
        line-height: 48/32rem;
        color: #212121;
      }

      .fl_datetime {
        font-size: 26/32rem;
        color: #999999;
      }
    }

    .fr {
      text-align: right;

      .fr_type {
        font-size: 26/32rem;
        line-height: 38/32rem;
        color: #212121;
      }

      .fr_amt {
        font-size: 32/32rem;
        line-height: 45/32rem;
        color: #212121;

        &.minus {
          color: #e83626;
        }
      }
    }
  }
}

.main_tip {
  margin-top: 30/32rem;
  text-align: center;
  font-size: 26/32rem;
  color: #999;
}

.chart_pic {
  width: 350/32rem;
  height: 5.9rem;
  float: left;
  position: absolute;
  left: 0px;
  top: 0.8125rem;
}

.chart_tips {
  width: 100%;
  height: 4.6875rem;
  float: right;
  text-align: right;

  i {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #ff4b3b;
    vertical-align: middle;
    margin-right: 16/32rem;
  }

  div:nth-child(1) {
    i {
      background: #3377ff;
    }
  }
}
.list_content {
  height: calc((100vh - 18.975rem));
  overflow: auto;
}
.total-content {
  display: flex;
  justify-content: space-between;
  .dings {
    img {
      display: block;
    }
  }
  .dinglist {
    font-size: 14px;
    margin-left: 10px;
    margin-top: 5px;
  }
}
.mengview {
  width: 100%;
  height: calc(100vh);
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  .qdao-bg {
    width: 16rem;
    height: 19rem;
    background: #fff;
    position: absolute;
    border-radius: 10px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    img {
      position: absolute;
      top: 0px;
      left: -25px;
      width: 19rem;
    }
    .wintext {
      position: absolute;
      top: 5.5rem;
      font-size: 3rem;
      color: #ffe402;
      left: 0;
      right: 0;
      text-align: center;
      margin: auto;
      z-index: 10;
    }
    .ding-text {
      position: absolute;
      left: 0;
      right: 0;
      text-align: center;
      margin: auto;
      bottom: 4rem;
      font-size: 1.2rem;
      color: #e6302d;
    }
    .dings-btn {
      display: flex;
      justify-content: space-between;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 1rem;
      text-align: center;
      padding:0 0.8rem;
      div{
        width: 6.8rem;
        height: 1.8rem;
        line-height: 1.8rem;
        border-radius: 1.8rem;
        color:#fff;
        font-size: 0.8rem;
        background: #e6302d;
      }
    }
  }
}
</style>
